$form-page: (
  'font-size': getCssVar('font-size', 'regular'),
  'header-border-color': getCssVar(color, border),
  'text-color': getCssVar(color, text, 2),
  'bg-color': transparent,
  'hover-text-color': getCssVar(color, text, 0),
  'hover-bg-color': transparent,
  'active-text-color': getCssVar(color, text, 0),
  'active-bg-color': transparent,
  'active-border-color': getCssVar(color, primary),
);

@include b(form-page) {
  @include set-component-css-var('form-page', $form-page);

  // 无分页时，分页内容区最上不需要间隔
  @include m(no-tab-header) {
    @include b(form-page-item) {
      padding-top: 0;
    }
  }
}

// 表单分页，tabs头样式
@include b(form-page-tab) {
  > .el-tabs__header.is-top {
    margin: 0;

    .el-tabs__item.is-top {
      font-size: getCssVar('form-page', 'font-size');
      color: getCssVar('form-page', 'text-color');
      background-color: getCssVar('form-page', 'bg-color');
    }

    .el-tabs__item.is-top:hover {
      color: getCssVar('form-page', 'hover-text-color');
      background-color: getCssVar('form-page', 'hover-bg-color');
    }

    .el-tabs__item.is-top.is-active {
      color: getCssVar('form-page', 'active-text-color');
      background-color: getCssVar('form-page', 'active-bg-color');
    }
  }

  // 分页头部底边
  .el-tabs__nav-wrap::after {
    background-color: getCssVar('form-page', 'header-border-color');
  }

  // 标示线颜色
  .el-tabs__active-bar{
    background-color: getCssVar('form-page','active-border-color');
  }
}

// 有分页时内容离分页有间隔
@include b(form-page-item) {
  padding-top: getCssVar('padding', 'top');
}

@include b(form-page-item-child) {
  margin-bottom: getCssVar('margin', 'bottom');
}
